<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
        
        <title>Flex Attributes Documentation</title>
        
        <script src="/js/greyspots.js" type="text/javascript"></script>
        <link href="/css/greyspots.css" type="text/css" rel="stylesheet" />
        
        <script src="/js/ace/ace.js" data-ace-base="/js/ace/" type="text/javascript" charset="utf-8"></script>
        <script src="/js/ace/ext-language_tools.js" type="text/javascript"></script>
        <script src="/js/ace/ext-searchbox.js" type="text/javascript"></script>
        
        <script src="doc-library/doc.js" type="text/javascript"></script>
        <link href="doc-library/doc.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <gs-jumbo>
            <h1 class="text-center">Flex Attributes</h1>
        </gs-jumbo>
            
        <gs-container min-width="sml;med;lrg">
            <h3>Attributes:</h3>
            <pre><code>flex-vertical
flex-horizontal
flex
flex-fill
flex-center
align-top
align-center
align-bottom
wrap
wrap-reverse
justify-start
justify-end
justify-center
justify-space-between
justify-space-around</code></pre>
            
            <h3>Description:</h3>
            <p>
                These attributes are shortcuts for using CSS Flexbox functionality. For documentation about Flexbox itself: <a href="https://developer.mozilla.org/docs/Web/Guide/CSS/Flexible_boxes" target="_blank">MDN</a>, <a href="https://css-tricks.com/using-flexbox/" target="_blank">CSS-Tricks</a>.
            </p>
            
            <h1>Examples:</h1>
            <div class="doc-example-description">
                <span class="h3">flex-vertical Example:</span><br />
                In this example we have a div that has been set to full height that also has the "flex-vertical" attribute. The "flex-vertical" attribute makes it so that the children of the div are orientated vertically.
            </div>
            <gs-doc-example>
                <template for="html" height="10">
                    <div style="height: 100%;" flex-vertical>
                        <div bg-success>test1<br />test1</div>
                        <div bg-danger>test2</div>
                        <div bg-warning>test3</div>
                    </div>
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">flex-horizontal Example:</span><br />
                In this example we have a div that has the "flex-horizontal" attribute. The "flex-horizontal" attribute makes it so that the children of the div are orientated horizontally.
            </div>
            <gs-doc-example>
                <template for="html" height="8">
                    <div flex-horizontal>
                        <div bg-success>test1<br />test1</div>
                        <div bg-danger>test2</div>
                        <div bg-warning>test3</div>
                    </div>
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">flex Example:</span><br />
                In this example we have two divs: one has the "flex-vertical" attribute and one has the "flex-horizontal" attribute and both of them have a child with the "flex" attribute. The "flex" attribute makes that child fill the unused room in the direction that the parent is set to.
            </div>
            <gs-doc-example>
                <template for="html" height="20">
                    <div style="height: 8em;" flex-vertical>
                        <div bg-success>test1<br />test1</div>
                        <div bg-danger flex>test2</div>
                        <div bg-warning>test3</div>
                    </div>
                    <br />
                    <div flex-horizontal>
                        <div bg-success>test1<br />test1</div>
                        <div bg-danger flex>test2</div>
                        <div bg-warning>test3</div>
                    </div>
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">flex-fill Example:</span><br />
                In this example we have two divs: one has the "flex-vertical" attribute and one has the "flex-horizontal" attribute and both of them have the "flex-fill" and a child with the "flex" attribute. The "flex-fill" attribute makes the children of the two divs take up all unused room in the directions that are opposite of the directions that the divs are set to (so for "flex-vertical" the children take up all of the unused horizontal room and for "flex-horizontal" the children take up all of the unused vertical room).
            </div>
            <gs-doc-example>
                <template for="html" height="20">
                    <div style="height: 8em;" flex-vertical flex-fill>
                        <div bg-success>test1<br />test1</div>
                        <div bg-danger flex>test2</div>
                        <div bg-warning>test3</div>
                    </div>
                    <br />
                    <div flex-horizontal flex-fill>
                        <div bg-success>test1<br />test1</div>
                        <div bg-danger flex>test2</div>
                        <div bg-warning>test3</div>
                    </div>
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">flex-center Example:</span><br />
                In this example we have a div that has the "flex-horizontal" attribute and the "flex-center" attribute. The "flex-center" attribute centers the children in the very middle of the parent.
            </div>
            <gs-doc-example>
                <template for="html" height="9">
                    <div bg-warning style="height: 5em;" flex-horizontal flex-center>
                        <div bg-success>test1<br />test1</div>
                    </div>
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Alignment Attributes Example:</span><br />
                In this example we have three divs with the "flex-horizontal" attribute. The first div also has the "align-top" attribute which makes it so that the children go to the top. The second div also has the "align-center" attribute which makes it so that the children go to the center. The third div also has the "align-bottom" attribute which makes it so that the children go to the bottom.
            </div>
            <gs-doc-example>
                <template for="html" height="24">
                    <div bg-info flex-horizontal align-top>
                        <div bg-success>test1<br />test1</div>
                        <div bg-danger flex>test2</div>
                        <div bg-warning>test3</div>
                    </div>
                    <br />
                    <div bg-info flex-horizontal align-center>
                        <div bg-success>test1<br />test1</div>
                        <div bg-danger flex>test2</div>
                        <div bg-warning>test3</div>
                    </div>
                    <br />
                    <div bg-info flex-horizontal align-bottom>
                        <div bg-success>test1<br />test1</div>
                        <div bg-danger flex>test2</div>
                        <div bg-warning>test3</div>
                    </div>
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Wrapping Attributes Example:</span><br />
                In this example we have two divs with the "flex-horizontal" attribute. The first div also has the "wrap" attribute which makes it so that the children wrap onto multiple lines if they cannot be displayed in one line. The second div also has the "wrap-reverse" attribute which makes it so that the lines are in reverse order.
            </div>
            <gs-doc-example>
                <template for="html" height="48">
                    <div flex-horizontal wrap>
                        <div bg-success>test1</div>
                        <div bg-danger>test2</div>
                        <div bg-warning>test3</div>
                        <div bg-success>test4</div>
                        <div bg-danger>test5</div>
                        <div bg-warning>test6</div>
                        <div bg-success>test7</div>
                        <div bg-danger>test8</div>
                        <div bg-warning>test9</div>
                        <div bg-success>test10</div>
                        <div bg-danger>test11</div>
                        <div bg-warning>test12</div>
                        <div bg-success>test13</div>
                        <div bg-danger>test14</div>
                        <div bg-warning>test15</div>
                    </div>
                    <br>
                    <div flex-horizontal wrap-reverse>
                        <div bg-success>test1</div>
                        <div bg-danger>test2</div>
                        <div bg-warning>test3</div>
                        <div bg-success>test4</div>
                        <div bg-danger>test5</div>
                        <div bg-warning>test6</div>
                        <div bg-success>test7</div>
                        <div bg-danger>test8</div>
                        <div bg-warning>test9</div>
                        <div bg-success>test10</div>
                        <div bg-danger>test11</div>
                        <div bg-warning>test12</div>
                        <div bg-success>test13</div>
                        <div bg-danger>test14</div>
                        <div bg-warning>test15</div>
                    </div>
                </template>
            </gs-doc-example>
            
            <div class="doc-example-description">
                <span class="h3">Justification Attributes Example:</span><br />
                In this example we have five divs each with the "flex-horizontal" attribute. We have five attributes to change the justification of the divs.<br/>
                justify-start: all divs are justified to the left<br/>
                justify-end: all divs are justified to the right<br/>
                justify-center: all divs are justified to the center<br/>
                justify-space-between: all divs have equal space between them, the first and last divs have no space from the edges of the parent<br/>
                justify-space-around: all divs have equal space between them and half space on the edges of the parent
                These same attributes can work on a vertical-flex parent as well.
            </div>
            <gs-doc-example>
                <template for="html" height="39">
                    justify-start:
                    <div flex-horizontal justify-start>
                        <div bg-success>test1</div>
                        <div bg-danger>test2</div>
                        <div bg-warning>test3</div>
                    </div>
                    <hr />
                    justify-end:
                    <div flex-horizontal justify-end>
                        <div bg-success>test1</div>
                        <div bg-danger>test2</div>
                        <div bg-warning>test3</div>
                    </div>
                    <hr />
                    justify-center:
                    <div flex-horizontal justify-center>
                        <div bg-success>test1</div>
                        <div bg-danger>test2</div>
                        <div bg-warning>test3</div>
                    </div>
                    <hr />
                    justify-space-between:
                    <div flex-horizontal justify-space-between>
                        <div bg-success>test1</div>
                        <div bg-danger>test2</div>
                        <div bg-warning>test3</div>
                    </div>
                    <hr />
                    justify-space-around:
                    <div flex-horizontal justify-space-around>
                        <div bg-success>test1</div>
                        <div bg-danger>test2</div>
                        <div bg-warning>test3</div>
                    </div>
                </template>
            </gs-doc-example>
        </gs-container>
    </body>
</html>
